<template>
  <div class="themeContainer">
    <div class="column">
      <el-button type="primary" @click="toMap">切换至地图</el-button>
    </div>
    <div class="column1">
      <el-button type="primary" @click="toScene">切换至场景</el-button>
    </div>
  </div>
</template>

<script>
import { ElLoading } from 'element-plus'
export default {
  name: 'Scene',
  data() {},
  methods: {
    toMap() {
      this.$router.push('/map')
      const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        loading.close()
      }, 2000)
      setTimeout(() => {
        this.$router.push('/map')
      }, 1000)
    },
    toScene() {
      const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        loading.close()
      }, 2000)
      setTimeout(() => {
        this.$router.push('/scene')
      }, 1000)
    },
    addLoad() {}
  }
}
</script>

<style lang="less" scoped>
.themeContainer {
  display: flex;
  width: 280px;
  height: 0px;
  border: 10px solid pink;
  border-width: 51px 38px 20px 132px;
  border-image-source: url(../../assets/images/bg.gif);
  border-image-slice: 51 38 20 132;
}
.column {
  position: absolute;
  top: 18px;
  left: 70px;
  width: 200px;
}
.column1 {
  position: absolute;
  top: 18px;
  left: 260px;
  width: 200px;
}
</style>
